<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="author" content="order by dede58.com" />
		<title>老司机商城-商品列表</title>
		<link rel="stylesheet" type="text/css" href="./css/style.css">
		<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.css" />
		<script type="text/javascript" src="js/jquery1.9.1.js"></script>
		<script type="text/javascript" src="js/common.js"></script>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>

	<body onload="loadHead()">

		<!-- start danpin -->
		<div class="danpin center page">

			<div class="biaoti center">老司机商品</div>
			<div class="main center" style="height: auto;">
				<div v-for="p in page.rows" class="mingxing fl mb20" style="border:2px solid #fff;width:230px;cursor:pointer;" onmouseout="this.style.border='2px solid #fff'" onmousemove="this.style.border='2px solid red'">
					<div class="sub_mingxing">
						<a :href="'goods-info.html?pid='+p.id" target="_self"><img :src="imageServerPath+'/'+p.image" alt=""></a>
					</div>
					<div class="pinpai">
						<a :href="'goods-info.html?pid='+p.id" target="_self">{{p.title}}</a>
					</div>
					<div class="youhui" v-html="p.sellPoint"></div>
					<div class="jiage">{{p.price}}元</div>
				</div>
				<div class="clear"></div>
			</div>

			<nav aria-label="Page navigation" style="text-align: center;">
				<ul class="pagination">
					<li v-for="pageNo in page.pageCount" @click="changePageNo(pageNo)" v-bind:class="currPageNo==pageNo?'active':''">
						<a href="javaScript:void(0)">{{pageNo}}</a>
					</li>
				</ul>
			</nav>

		</div>
		<!-- end danpin -->

	</body>
	<script>
		var search = location.search.replace("?", "");

		var pageVm = new Vue({
			el: ".page",
			data: {
				page: {},
				imageServerPath: imageServerPath,
				currPageNo: 1
			},
			methods: {
				//页码切换
				changePageNo: function(pageNo) {
					this.currPageNo = pageNo;
					$.ajax({
						url: serverPath + "product/getPagingProducts?" + search + "&pageNo=" + pageNo,
						type: "get",
						success: function(res) {
							pageVm.page = res.data;
						}
					});
				}
			}
		});
		$.ajax({
			url: serverPath + "product/getPagingProducts?" + search,
			type: "get",
			success: function(res) {
				pageVm.page = res.data;
			}
		});
	</script>

</html>